<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系人 - 求职系统</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        /* 重置body和html样式 */
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            overflow: hidden;
            background-color: #f8f8f8;
        }

        /* 主容器样式 - 全屏优化 */
        .contacts-container {
            padding: 0;
            background-color: #f8f8f8;
            height: 100vh;
            width: 100%;
            margin: 0;
            display: flex;
            flex-direction: column;
        }

        /* 联系人列表 - 全屏优化 */
        .contact-list {
            background-color: white;
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .sidebar-header {
            padding: 16px 20px;
            font-size: 16px;
            font-weight: bold;
            border-bottom: 1px solid #eaeaea;
            background-color: #fafafa;
            color: #333;
            flex-shrink: 0;
        }

        .contacts-scrollable {
            flex: 1;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .contact-item {
            padding: 14px 20px;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            align-items: center;
            position: relative;
            transition: background-color 0.2s;
        }

        .contact-item:hover {
            background-color: #f9f9f9;
        }

        /* 左侧内容区域 */
        .contact-left {
            display: flex;
            align-items: center;
            flex: 1;
            min-width: 0;
        }

        .contact-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #1E88E5;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            font-weight: bold;
            font-size: 16px;
            flex-shrink: 0;
        }

        .contact-info {
            flex: 1;
            overflow: hidden;
            min-width: 0;
        }

        .contact-name {
            font-weight: 600;
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #333;
            font-size: 15px;
        }

        .contact-preview {
            font-size: 13px;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* 右侧内容区域 */
        .contact-right {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            margin-left: 10px;
        }

        .contact-time {
            font-size: 12px;
            color: #999;
            white-space: nowrap;
            margin-bottom: 5px;
        }

        .chat-btn {
            padding: 0 12px;
            height: 32px;
            line-height: 32px;
            font-size: 13px;
            border-radius: 4px;
            background-color: #1E88E5;
        }

        .unread-badge {
            position: absolute;
            top: 12px;
            right: 20px;
            width: 18px;
            height: 18px;
            background-color: #FF5722;
            border-radius: 50%;
            color: white;
            font-size: 11px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        .contact-actions {
            display: flex;
            align-items: center;
        }

        .blocked-contact {
            opacity: 0.6;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
<div class="contacts-container">
    <!-- 联系人列表 -->
    <div class="contact-list">
        <div class="sidebar-header">联系人</div>
        <div class="contacts-scrollable">
            <div th:each="msg : ${message}" class="contact-item"
                 th:classappend="${msg.messageObject.receiver != null and msg.messageObject.receiver.id == msg.messageObject.receiver.id} ? 'active' : ''"
                 th:attr="data-contact-id=${msg.messageObject.sender.id == currentUserId ? msg.messageObject.receiver.id : msg.messageObject.sender.id}">
                <div class="contact-left">
                    <div class="contact-avatar"
                         th:text="${msg.messageObject.sender.id == currentUserId ?
                          msg.messageObject.receiver.info.username.substring(0,1) :
                          msg.messageObject.sender.info.username.substring(0,1)}"></div>
                    <div class="contact-info">
                        <div class="contact-name"
                             th:text="${msg.messageObject.sender.id == currentUserId ?
                            msg.messageObject.receiver.info.username :
                            msg.messageObject.sender.info.username}"></div>
                        <div class="contact-preview" th:text="${msg.content}"></div>
                    </div>
                </div>

                <div class="contact-right">
                    <div class="contact-time" th:text="${#temporals.format(msg.sendTime, 'MM-dd HH:mm')}"></div>
                    <div class="contact-actions">
                        <button class="layui-btn layui-btn-normal layui-btn-sm chat-btn"
                                th:attr="data-sender-id=${currentUserId},
                              data-receiver-id=${msg.messageObject.sender.id == currentUserId ?
                              msg.messageObject.receiver.id : msg.messageObject.sender.id}">
                            进入聊天
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 引入 layui.js -->
<script src="/layui/layui.js"></script>
<script>
    layui.use(['jquery', 'layer'], function(){
        var $ = layui.jquery;
        var layer = layui.layer;

        // 当前用户ID（应从登录信息获取）
        const currentUserId = [[${currentUserId}]];

        // 页面加载时初始化
        $(document).ready(function() {
            // 为每个进入聊天按钮添加点击事件
            $('.chat-btn').click(function(e) {
                e.preventDefault();
                e.stopPropagation();

                const $btn = $(this);
                const receiverId = $btn.data('receiver-id');

                // 检查是否已拉黑对方
                checkBlockStatus(currentUserId, receiverId, function(isBlocked) {
                    if (isBlocked) {
                        layer.msg('您已拉黑对方，无法发起聊天', {icon: 2});
                        $btn.closest('.contact-item').addClass('blocked-contact');
                        $btn.prop('disabled', true).addClass('layui-btn-disabled');
                    } else {
                        // 未拉黑，正常进入聊天
                        window.location.href = '/api/messages/chat?senderId=' + currentUserId + '&receiverId=' + receiverId;
                    }
                });
            });

            // 点击整个联系人项也可进入聊天
            $('.contact-item').click(function(e) {
                if (!$(e.target).closest('.chat-btn').length) {
                    const $item = $(this);
                    const receiverId = $item.attr('data-contact-id');

                    // 检查是否已拉黑对方
                    checkBlockStatus(currentUserId, receiverId, function(isBlocked) {
                        if (!isBlocked) {
                            window.location.href = '/api/messages/chat?senderId=' + currentUserId + '&receiverId=' + receiverId;
                        }
                    });
                }
            });
        });

        // 检查拉黑状态
        function checkBlockStatus(senderId, receiverId, callback) {
            $.ajax({
                url: '/api/messages/checkBlockStatus?senderId=' + senderId + '&receiverId=' + receiverId,
                type: 'GET',
                success: function(isBlocked) {
                    callback(isBlocked);
                },
                error: function(error) {
                    console.error('检查拉黑状态失败:', error);
                    layer.msg('检查拉黑状态失败', {icon: 2});
                    callback(false); // 默认按未拉黑处理
                }
            });
        }
    });
</script>
</body>
</html>